<template>
    <div>
        <div class="wangyi">
        </div>
        <van-form ref="refForm">
            <van-cell-group inset>
                <van-field v-model="loginForm.phone" clearable name="validator" validate-trigger="onChange"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '手机号格式错误', pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }]" />
                <van-field v-model="loginForm.code" name="valida" trigger="onBlur" placeholder="请输入验证码"
                    :rules="[{ required: true, message: '验证码格式错误', pattern: /^\d{6}$/  }]" clearable>

                    <template #button>
                        <van-button size="small" type="default" @click="addRegister">发送验证码</van-button>
                    </template>

                </van-field>
                <van-field v-model="loginForm.password" name="mima" trigger="onBlur" placeholder="请输入密码"
                    :rules="[{ required: true, message: '密码格式错误', pattern: /^[0-9]{6,18}$/ }]"
                    clearable>
                </van-field>
                <div class="text">
                    <span><a href="https://aq.reg.163.com/ydaq/offline#/" class="yu">遇到问题?</a></span>
                    <span><router-link to="" class="deng">使用密码验证登陆</router-link></span>
                </div>

            </van-cell-group>
            <div class="bnt">
                <van-button type="danger" style="width:335px;" @click="onRegister">注册</van-button>
            </div>
            <span class="qita">
                <van-checkbox v-model="loginForm.checked" checked-color="#b1b1b1" icon-size="17px" shape="square">
                    同意
                    <a href="">《服务条款》</a>
                    和
                    <a href="">《隐私政策》</a>
                    和
                    <a href="">《网易严选服务协议》</a>

                </van-checkbox>

            </span>
        </van-form>


        <div class="qitan">

            <router-link to="/login">
                <p class="qita">其他登陆方式 > </p>

            </router-link>

        </div>

    </div>
</template>
  
<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()
import { getCode, getRegister } from '@/api/login'
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
const TokenKey = 'vue_admin_template_token'
const refForm = ref()
const loginForm = ref({
    code: '',
    phone: '',
    password: "",
    checked: true
})
// 获取验证码
const addRegister = async () => {
    let res = refForm.value.getValidationStatus()
    console.log(res);


    if (res.validator == 'passed') {

        const phone = loginForm.value.phone
        const result = await getCode(phone)
        
        result.code === 200 && console.log(result.data);

    } else {
        showFailToast('输入有误');
    }

}

// 注册
const onRegister = async () => {
    let res = refForm.value.getValidationStatus()
    console.log(res);
    
    if (res.valida && res.validator && res.mima == 'passed') {
        const phone = loginForm.value.phone
        const password = loginForm.value.password
        const code = loginForm.value.code
        const result = await getRegister({ phone, password, code })
        if (result.code === 200) {
           
            router.push('/goiphone')
        } else {
            showFailToast('注册失败');
        }
    }
}

</script>
  
<style scoped>
.wangyi {
    height: 115px;
    width: 100%;
    background: url(../../../assets/网易.png) no-repeat 110px 30px;
    background-size: 160px;
}

.text {

    display: flex;
    justify-content: space-between;
    margin: 0 15px;
    margin-top: 10px;
}

.deng {
    color: #7b7b7b;
    font-size: 6.2px;
}

.yu {
    color: #c0c0c0;
    font-size: 6.2px;
}

.bnt {
    padding-top: 12px;
    padding-left: 25px;
    padding-bottom: 10px;
}

.tex {
    display: flex;
    justify-content: center;
}

.tex p {
    font-size: 5px;
}

.tex p a {
    color: #1d89ff;
}

.xiaban {
    margin-top: 40px;
}

.qita {
    font-size: 12px;
    display: block;
    margin-left: 24px;
}

.qita a {
    color: #49a0ff;
}


.qitan {
    margin-left: 130px;
    margin-top: 50px;
}

.qitan p {
    color: black;
}
</style>